<template>
  <view style="background: #e3e3e3;width: 100vw;height: 100vh">
    <view class="tis" v-if="carts.length==0">
      <image src="../../static/img/菜篮子.png" mode="widthFix"></image>
      <!-- <view>还没有添加菜品~</view> -->
    </view>

    <view class="cart_list">

      <view class="cart_item" v-for="item in  carts" :key="item.id">

        <view class="recipe_info">

          <image class="icon-image" v-if="item.picture" :src="item.picture" mode="aspectFill"></image>
          <view class="list-title" v-if="item.name">{{ item.name }}</view>
          <view class="remove_button" @click="deleteById(item.foodId)">
            <uni-icons type="trash" size="20"></uni-icons>
          </view>
        </view>
        <view class="material">
          <view class="material_item" v-for="i in item.ingredients" :key="i.name">
            <view class="name">{{ i.name }}</view>

            <view class="amount">{{ i.amount }}</view>
          </view>

        </view>

      </view>
    </view>

  </view>

</template>

<script>

import {
  user_cart_list,
  cart_delete_by_id
} from '@/api/user_cart.js'
import UniIcons from "@/components/uni/uni-icons/uni-icons.vue";


export default {
  components: {
    UniIcons,
  },
  data() {
    return {
      carts: []
    }
  },
  onLoad() {
    this.getCartList()
  },

  methods: {

    getCartList() {
      user_cart_list({}).then(res => {
        console.log(res)
        this.carts = res.data
      })
    },
    deleteById(foodId) {
      uni.showModal({
        title: '提示',
        content: '确定删除吗？',
        success: (res) => {
          if (res.confirm) {
            cart_delete_by_id({foodId}).then(res => {
              uni.showToast({
                title: res.message
              })
              this.getCartList()
            })
          }
        }
      });


    }

  },
  computed: {}
}
</script>

<style lang="scss">


.tis {
  image {
    margin-left: 100rpx;
    margin-top: -200rpx;
    width: 600rpx;
  }

  view {
    margin-top: -100rpx;
    margin-left: 100px;
    font-family: "华文仿宋", serif;
    font-size: 20px;
    font-weight: bold;
    z-index: 999;
  }
}


.cart_list {
  width: 100vw;
  padding: 16upx;
  display: flex;
  flex-direction: column;
  gap: 16px;

  .cart_item {
    width: 92%;
    display: flex;
    padding: 16upx;
    background: white;
    flex-direction: column;
    border-radius: 24upx;

    .recipe_info {
      width: 100%;
      display: flex;
      position: relative;

      .icon-image {
        width: 100upx;
        height: 100upx;
        border-radius: 4upx;
      }

      .list-title {
        margin-left: 32upx;
      }

      .remove_button {
        position: absolute;
        top: 12upx;
        right: 12upx;
        width: 80upx;
        height: 80upx;
        background: #cecdcd;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }


    }
  }
}

.material_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 150upx;
  margin-right: 100upx;
}

</style>